// 引入依赖
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import {
  registerMicroApps, // 注册子应用
  runAfterFirstMounted, // 第一个子应用加载完毕
  setDefaultMountApp, // 设置默认子应用
  start, // 微服务启动
  initGlobalState,
  MicroAppStateActions ,
} from 'qiankun';

// 公共依赖挂载在window上,目的是传递给子应用
// window.vue = Vue;

// 渲染主应用, #container为主应用根元素
new Vue({
  router,
  render: h => h(App)
}).$mount('#container');

// 构建子应用, #micro-app为子应用容器
let microApps = [
  {
    name: 'project-a',
    entry: '//192.168.20.140:8090',
    container: '#micro-app',
    activeRule: '#/project-a' // 主应用路由为hash模式，子应用路由为hash
  },
  {
    name: 'project-b',
    entry: '//127.0.0.1:8888',
    container: '#micro-app',
    activeRule: '#/project-b' // 主应用路由为hash模式，子应用路由为hash
  }
];
// 注册子应用
registerMicroApps(microApps, {
  // 挂载前回调
  beforeLoad: [
    app => {
      console.log('before load', app);
    }
  ],
  // 挂载后回调
  beforeMount: [
    app => {
      console.log('before mount', app);
    }
  ],
  // 卸载后回调
  afterUnmount: [
    app => {
      console.log('after unload', app);
    }
  ]
});

// 设置默认子应用,参数genActiveRule('/test1')函数内的参数一致
// setDefaultMountApp('/');

// 第一个子应用加载完毕回调
// runAfterFirstMounted(() => {});

// 启动微服务
start({
  // prefetch: false,
  sandbox: {
    experimentalStyleIsolation: true
  }
});

// 通讯
const actions = initGlobalState({
  inputVal: 'init' // 初始化state，里面内容您随意
})
// 在项目中任何需要监听的地方进行监听，在这里监听是为了方便
actions.onGlobalStateChange((state,prev)=>{
  console.log('main state change',state);
})
// 将action对象绑到Vue原型上，为了项目中其他地方使用方便
Vue.prototype.$actions = actions